<template>
	<section class="todoapp">
		<TodoHeader :arr="showList" @add="addFn"></TodoHeader>
		<TodoMain :arr="showList" @del="delFn"></TodoMain>
		<TodoFooter :arr="list" @eliminate="eliminate" @changeType="changeType"></TodoFooter>
	</section>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
	// 样式引入 + 导入组件并注册使用
	import './styles/base.css'
	import './styles/index.css'
	export default {
		data() {
			return {
				type: 'all',
				list: [{
						id: 100,
						name: "吃饭",
						isDone: true
					},
					{
						id: 201,
						name: "睡觉",
						isDone: false
					},
					{
						id: 103,
						name: "打豆豆",
						isDone: true
					},
				],
			};
		},
		components: {
			TodoHeader,
			TodoMain,
			TodoFooter
		},
		computed: {
			showList() {
				// console.log(this.type)
				if (this.type === 'active') {
					return this.list.filter(item => !item.isDone)
				}else if (this.type === 'complete') {
					return this.list.filter(item => item.isDone)
				} else {
					return this.list
				}
			}
		},
		methods: {
			//删除功能
			delFn(id) {
				this.list = this.list.filter(item => item.id !== id)
			},
			//输入框添加
			addFn(name) {
				this.list.unshift({
					id: +new Date(),
					name,
					idDone: false
				})
			},
			//清除已完成功能
			eliminate() {
				this.list = this.list.filter(item => !item.isDone)
			},
			changeType(type) {
				this.type = type
			},
			// checkAll(sele) {
			// 	this.list.forEach(item => item.isDone = !sele)
			// },
		}
	};
</script>
